<template>
  <header class="home-page__header">
    <!-- 左侧功能按钮 -->
    <div class="funcs left">
      <BackBtn v-if="showBackBtn" @click="goBack"></BackBtn>
      <slot name="left" ></slot>
    </div>
    <!-- 页面标题 -->
    <div class="title flex-1">
      <slot name="title">{{ title }}</slot>
    </div>
    <!-- 右侧功能按钮 -->
    <div class="funcs right">
      <slot name="right">
        <UserFunc v-if="($route.meta.funcs as string[])?.includes('user')" />
        <CartFunc v-if="($route.meta.funcs as string[])?.includes('cart')" />
      </slot>
    </div>
  </header>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import BackBtn from './BackBtn.vue'
import UserFunc from '../pages/home/UserFunc.vue'
import CartFunc from '../pages/home/CartFunc.vue'

export default defineComponent({
  props: {
    title: {
      type: String,
      default: ''
    },
    showBackBtn: {
      type: Boolean,
      default: false
    }
  },
  components: {
    BackBtn,
    UserFunc,
    CartFunc
},
  setup() {
    
  },
  methods: {
    goBack() {
      window.history.go(-1)
    }
  }
})
</script>


<style lang="stylus" scoped>
@import '../../styles/mixin.styl'

.home-page__header
  width 100%
  height 1.88rem
  padding .88rem .32rem 0
  // padding-top .88rem
  Flex(row, flex-start, center)
  // position relative
  .funcs
    width 14%
    display inline-block
    overflow hidden
    font-size 0
    &.left
      Flex(row, flex-start, center)
    &.right
      Flex(row-reverse, flex-start, center)
  .title
    padding 0 .1rem
    text-align center
    font-size .32rem
</style>